import React from 'react'
import QueueAnim from 'rc-queue-anim'
import TweenOne from 'rc-tween-one'
import { Row, Col } from 'antd'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import { FormattedMessage } from 'react-intl';

function ContentThoughtWorks (props) {
  const { ...tagProps } = props
  const { dataSource, isMobile } = tagProps
  delete tagProps.dataSource
  delete tagProps.isMobile
  const animType = {
    queue: isMobile ? 'bottom' : 'left',
    one: isMobile
      ? {
        scaleY: '+=0.3',
        opacity: 0,
        type: 'from',
        ease: 'easeOutQuad'
      }
      : {
        x: '+=30',
        opacity: 0,
        type: 'from',
        ease: 'easeOutQuad'
      }
  }
  const img = (
    <TweenOne
      key='img'
      animation={animType.one}
      {...dataSource.imgWrapper}
      component={Col}
      componentProps={{
        md: dataSource.imgWrapper.md,
        xs: dataSource.imgWrapper.xs
      }}
    >
      <span {...dataSource.img}>
        <span><FormattedMessage id='与我们互动' /></span>
        <img src={dataSource.img.children} width='100%' alt='img' />
      </span>
    </TweenOne>
  )
  return (
    <div {...tagProps} {...dataSource.wrapper}>
      <OverPack {...dataSource.OverPack} component={Row}>
        {isMobile && img}
        <QueueAnim
          type={animType.queue}
          key='text'
          leaveReverse
          ease={['easeOutCubic', 'easeInCubic']}
          {...dataSource.textWrapper}
          component={Col}
          componentProps={{
            md: dataSource.textWrapper.md,
            xs: dataSource.textWrapper.xs
          }}
        >
          <h2 key='h1' {...dataSource.title}>
            {dataSource.title.children}
          </h2>
          <div key='p' {...dataSource.content}>
            {dataSource.content.children}
          </div>
          <a href='https://www.thoughtworks.com/'><FormattedMessage id='前往思特沃克官网' /></a>
        </QueueAnim>
        {!isMobile && img}
      </OverPack>
    </div>
  )
}

export default ContentThoughtWorks
